<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%--@elvariable id="typeList" type="java.util.List"--%>
<%--@elvariable id="type" type="com.genghis.ptas.classify.entity.Type"--%>
<%--@elvariable id="notes" type="java.util.List"--%>
<%--@elvariable id="note" type="com.genghis.ptas.note.entity.Note"--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/pages/timeline.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        .page-content {
            margin-left: 0 !important;
        }

        body {
            background-color: white !important;
        }

        ul.page-sidebar-menu > li > a {
            border-top: 1px solid #eae7ff !important;
            color: #ffffff !important;
        }

    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <!-- END CONTAINER -->
        <div class="page-content">
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title">
                        笔记
                        <small>我的笔记</small>
                    </h3>
                    <ul class="page-breadcrumb breadcrumb">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="javascript:" onclick="top.addTab('public/menu')">
                                首页
                            </a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li>
                            <a href="javascript:"> 我的笔记 </a>
                        </li>
                        <li class="pull-right">
                            <span id="nowTime"></span>
                        </li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <!-- BEGIN SIDEBAR -->
                    <div class="page-sidebar-wrapper">
                        <div class="page-sidebar navbar-collapse collapse">
                            <!-- BEGIN SIDEBAR MENU -->
                            <ul class="page-sidebar-menu" data-auto-scroll="true" data-slide-speed="200"
                                style="background-color: #eae7ff">
                                <li>
                                    <a href="javascript:" onclick="queryNote(0)">
                                        <i class="fa fa-pencil"></i>
                                        <span class="title" style="color: #000000;font-size: 20px">
                                        所有分类
                                        </span>
                                    </a>
                                </li>
                                <c:forEach var="type" items="${typeList}">
                                    <li>
                                        <a href="javascript:">
                                            <i class="fa fa-map-marker"></i>
                                            <span class="title" style="color: #000000">${type.typeName}</span>
                                            <span class="arrow "></span>
                                        </a>
                                        <ul class="sub-menu">
                                            <c:forEach var="typeValue" items="${type.typeValuesList}">
                                                <li>
                                                    <a href="javascript:" style="color: #000000"
                                                       onclick="queryNote(${typeValue.id})">
                                                            ${typeValue.typeValue}
                                                    </a>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                    </li>
                                </c:forEach>
                                <li class="last">
                                    <a href="">
                                    </a>
                                </li>
                            </ul>
                            <!-- END SIDEBAR MENU -->
                        </div>
                    </div>
                </div>
                <div class="col-md-9" id="contentList">
                    <form role="form">
                        <div class="row form-group">
                            <div class="col-md-5" style="margin-left: 60px">
                                <div class="input-group input-large date-picker input-daterange" data-date=""
                                     data-date-format="yyyy-mm-dd">
                                    <input type="text" id="fromDate" value="" placeholder="开始时间"
                                           class="form-control">
                                    <span class="input-group-addon"> to</span>
                                    <input type="text" id="toDate" value="" placeholder="结束时间"
                                           class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group input-small pull-right">
                                    <input type="text" value="" id="noteName" class="form-control" placeholder="课件名称">
                                </div>
                            </div>
                            <div class="col-md-3 pull-right">
                                <a class="btn green" onclick="queryNote(0)">
                                    查询 <i class="fa fa-search"></i>
                                </a>
                                <a class="btn green pull-right" onclick="addNote()">
                                    新增 <i class="fa fa-plus"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                    <ul class="timeline" id="noteList" style="margin-top: 50px">
                        <c:forEach var="note" items="${notes}">
                            <li class="timeline-${note.showColor}" id="note_${note.id}">
                                <div class="timeline-time">
								<span class="date" style="color: ${note.showColor};font-size: 15px">
                                        ${note.createDate}
                                </span>
								<span class="time">
                                </span>
                                </div>
                                <div class="timeline-icon">
                                    <i class="fa fa-trophy"></i>
                                </div>
                                <div class="timeline-body">
                                    <h2>
                                            ${note.noteName}
                                        <c:choose>
                                            <c:when test="${note.state==0}">
                                                (未审核笔记)
                                            </c:when>
                                            <c:when test="${note.state==1}">
                                                (已公示笔记)
                                            </c:when>
                                            <c:when test="${note.state==2}">
                                                (笔记公示失败)
                                            </c:when>
                                            <c:otherwise>
                                                (未申请公示笔记)
                                            </c:otherwise>
                                        </c:choose>
                                    </h2>

                                    <div class="timeline-content">
                                            ${note.noteContent}
                                    </div>
                                    <div class="timeline-footer">
                                        <a href="javascript:" onclick="delNote('${note.id}','${note.noteType}')"
                                           class="nav-link pull-right" style="margin-right: 10px">
                                            删除 <i class="fa fa-minus"></i>
                                        </a>

                                        <a href="javascript:" onclick="editNote('${note.id}')"
                                           class="nav-link pull-right" style="margin-right: 10px">
                                            编辑 <i class="fa fa-edit"></i>
                                        </a>
                                        <c:if test="${note.state<0}">
                                            <a href="javascript:" onclick="publicNote('${note.id}','${note.noteType}')"
                                               class="nav-link pull-right" style="margin-right: 10px">
                                                申请公示 <i class="fa fa-share"></i>
                                            </a>
                                        </c:if>
                                        <c:if test="${note.state>=0}">
                                            <a href="javascript:"
                                               onclick="noPublicNote('${note.id}','${note.noteType}')"
                                               class="nav-link pull-right" style="margin-right: 10px">
                                                取消公示 <i class="fa fa-share"></i>
                                            </a>
                                        </c:if>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>

    </div>
    <!-- END CONTENT -->
</div>

<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script src="assets/scripts/core/app.js"></script>
<script src="ecommerce/plugins/back-to-top.js"></script>

<script>
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        if (jQuery().datepicker) {
            $('.date-picker').datepicker({
                rtl: App.isRTL(),
                autoclose: true
            });
            $('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
        }
        parent.browserSizeDeal(2, document.body.clientHeight + 100);
        window.setInterval(setNotePageTime, 1000);
    });

    function setNotePageTime() {
        $("#nowTime").html(top.getNowTime());
    }

    function queryNote(id) {
        $.ajax({
            url: "note/listAllNote",
            data: {
                noteType: id,
                userId: ${user.id},
                fromDate: $("#fromDate").val(),
                toDate: $("#toDate").val(),
                noteName: $("#noteName").val()
            },
            type: "POST",
            dataType: "json",
            success: function (data) {
                var innerHtml = "";
                for (var i in data) {
                    innerHtml += getInnerHtml(data[i]);
                }
                $("#noteList").html(innerHtml);
                parent.browserSizeDeal(2, document.body.clientHeight - 10);
            },
            error: function () {
            }
        })
    }

    function getInnerHtml(data) {
        var fun = data.state < 0 ? ( '<a href="javascript:" class="nav-link pull-right" onclick="publicNote(' + data.id + ',' + data.noteType + ')" style="margin-right: 10px">' +
                '    申请公示 <i class="fa fa-share"></i>' +
                '</a>' ) : ( '<a href="javascript:" class="nav-link pull-right" onclick="noPublicNote(' + data.id + ',' + data.noteType + ')" style="margin-right: 10px">' +
                '    取消公示 <i class="fa fa-share"></i>' +
                '</a>'
                );

        var state = data.state == 1 ? '已公示笔记' : data.state == 0 ? '未审核笔记' : data.state == 2 ? '笔记公示失败' : '未申请公示笔记';

        return  '<li class="timeline-' + data.showColor + '">'
                + '    <div class="timeline-time">'
                + '        <span class="date" style="font-size: 15px ;color: ' + data.showColor + ';">' + data.createDate + '</span>'
                + '        <span class="time">' + '</span>'
                + '    </div>'
                + '    <div class="timeline-icon">'
                + '        <i class="fa fa-trophy"></i>'
                + '    </div>'
                + '    <div class="timeline-body">'
                + '        <h2>' + data.noteName + '(' + state + ')' + '</h2>'
                + '        <div class="timeline-content">'
                + '            ' + data.noteContent
                + '        </div>'
                + '        <div class="timeline-footer">'
                + '            <a href="javascript:" class="nav-link pull-right" onclick="delNote(' + data.id + ',' + data.noteType + ')" style="margin-right: 10px">'
                + '                删除<i class="fa fa-minus"></i>'
                + '            </a>'
                + '            <a href="javascript:" class="nav-link pull-right" onclick="editNote(' + data.id + ')" style="margin-right: 10px">'
                + '                编辑<i class="fa fa-edit"></i>'
                + '            </a>'
                + fun
                + '        </div>'
                + '    </div>'
                + '</li>';
    }

    function publicNote(noteId, noteType) {
        $.ajax({
            url: "note/publicNotes?id=" + noteId,
            dataType: "json",
            type: "DELETE",
            success: function () {
                top.bootbox.alert("已提交申请公示！");
                queryNote(noteType);
            }
        });
    }

    function noPublicNote(noteId, noteType) {
        $.ajax({
            url: "note/noPublicNote?id=" + noteId,
            dataType: "json",
            type: "DELETE",
            success: function () {
                top.bootbox.alert("已提取消公示！");
                queryNote(noteType);
            }
        });
    }

    function delNote(noteId, noteType) {
        $.ajax({
            url: "note/delNoteDo?id=" + noteId,
            dataType: "json",
            type: "DELETE",
            success: function () {
                top.bootbox.alert("删除成功！");
                $("#note_" + noteId).remove();
                queryNote(noteType);
            }
        })
    }

    function editNote(noteId) {
        top.showDialog("note/editNoteDo", "编辑笔记", "id=" + noteId, 1200, 400);

    }

    function addNote() {
        top.showDialog("note/addNoteDo", "新增笔记", "id=", 1200, 400);
    }
</script>
<!-- END JAVA_SCRIPTS -->
</body>
<!-- END BODY -->
</html>